<template>
  <el-card>
    <el-row align="middle" type="flex" style="height:50px">
      <el-button v-if="!startTesting" size="small" type="success" @click="startTest">开始考试</el-button>

      <el-button v-if="startTesting" size="small" type="danger" @click="endTest">结束考试</el-button>
    </el-row>
    <el-card v-if="startTesting">
      <!-- 题干 -->
      <el-row type="flex" style="height:60px">
        <el-tag>{{ currentType }}</el-tag>
        <el-tag type="successd" style="margin-left:10px">{{ currentDiff }}</el-tag>

      </el-row>
      <el-alert :title="(currentIndex +1)+'-' + currentItem.title" :closable="false" show-icon type="info" />
      <el-checkbox-group v-model="answer">
        <!-- 选项 -->
        <el-row v-for="item in currentFromList" :key="item.id" style="height:40px" type="flex" align="middle">
          <el-checkbox :disabled="isFinished" :label="item.name">{{ item.name + '.' + item.item }}</el-checkbox>
        </el-row>
      </el-checkbox-group>
      <el-row style="height:40px; margin-top:40px" type="flex" align="middle" justify="space-between">
        <el-button type="success" size="small" :disabled="isFinished" @click="confirm">提交</el-button>
        <el-col :span="18">
          <el-button type="primary" size="small" @click="prev">上一题</el-button>
          <el-button type="primary" size="small" @click="next">下一题</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 考试结果 -->
    <el-card v-if="!startTesting">
      <el-alert :title="`您本次考试得了${total}分`" :closable="false" center show-icon type="danger" />

      <div class="button-list">
        <template v-for="item in combineList">
          <el-button
            v-if="item.isFinished && item.isOK"
            :key="item.id"
            class="my-btn"
            type="success"
            icon="el-icon-check"
            circle
            @click="queryQuestion(item.id)"
          />
          <el-button
            v-if="item.isFinished && !item.isOK"
            :key="item.id"
            class="my-btn"
            type="danger"
            icon="el-icon-close"
            circle
            @click="queryQuestion(item.id)"
          />
          <el-button
            v-if="!item.isFinished"
            :key="item.id"
            class="my-btn"
            type="info"
            icon="el-icon-loading"
            circle
            @click="queryQuestion(item.id)"
          />
        </template>
      </div>
    </el-card>
    <!--  -->
    <el-dialog title="查看题目" :visible.sync="showDialog">
      <el-row type="flex" style="height:60px">
        <el-tag>{{ currentType }}</el-tag>
        <el-tag type="successd" style="margin-left:10px">{{ currentDiff }}</el-tag>
        <el-tag type="success" style="margin-left:10px">正确答案：{{ currentItem.answer }}</el-tag>
        <el-tag type="warning" style="margin-left:10px">你的答案：{{ answer.join("").split("").sort().join("") }}</el-tag>

      </el-row>
      <el-alert :title="(currentIndex +1)+'-' + currentItem.title" :closable="false" show-icon type="info" />
      <el-checkbox-group v-model="answer">
        <!-- 选项 -->
        <el-row v-for="item in currentFromList" :key="item.id" style="height:40px" type="flex" align="middle">
          <el-checkbox :disabled="true" :label="item.name">{{ item.name + '.' + item.item }}</el-checkbox>
        </el-row>
      </el-checkbox-group>
    </el-dialog>
  </el-card>
</template>

<script>

export default {
  data() {
    return {
      list: JSON.parse(localStorage.getItem('questions') || '[]'),
      fromList: JSON.parse(localStorage.getItem('fromlist') || '[]'),
      currentIndex: 0,
      answer: [], // 答案
      answerList: [], // 答案列表
      startTesting: false,
      showDialog: false,
      typeList: [{ id: '1', name: '单选题' }, { id: '2', name: '多选题' }, { id: '3', name: '判断题' }, { id: '4', name: '简答题' }],
      diffList: [{ id: '1', name: '1星' }, { id: '2', name: '2星' }, { id: '3', name: '3星' }, { id: '4', name: '4星' }, { id: '5', name: '5星' }]
    }
  },
  computed: {
    currentItem() {
      return this.list.length ? this.list[this.currentIndex] : {}
    },
    currentFromList() {
      return this.fromList.filter(item => item.fid === this.currentItem.id)
    },
    isFinished() {
      return this.answerList.some(item => item.id === this.currentItem.id && item.isFinished)
    },
    currentType() {
      return this.currentItem.type ? this.typeList.find(item => item.id === this.currentItem.type).name : ''
    },
    currentDiff() {
      return this.currentItem.diff ? this.diffList.find(item => item.id === this.currentItem.diff).name : ''
    },
    total() {
      return this.answerList.filter(item => item.isOK).length
    },
    combineList() {
      return this.list.map(item => {
        const obj = this.answerList.find(obj => obj.id === item.id)
        return { ...item, isFinished: !!obj, isOK: obj ? obj.isOK : false }
      })
    }
  },
  watch: {
    currentItem() {
      if (this.isFinished) {
        this.answer = this.answerList.find(item => item.id === this.currentItem.id).answer
      } else {
        this.answer = []
      }
    }
  },
  created() {

  },
  methods: {
    confirm() {
      if (!this.answer.length) {
        this.$message.warning('您还没选择任何一个答案')
        return
      }
      const rightAnswer = this.currentItem.answer.split('')
      this.answerList.push({ id: this.currentItem.id, isFinished: true, isOK: this.compareArr(rightAnswer, this.answer),
        answer: this.answer })
      this.answer = []
      this.next()
    },
    compareArr(arrA, arrB) {
      if (arrA.length !== arrB.length) {
        return false
      }
      let flag = true
      arrA.forEach(item => {
        if (!arrB.some(O => O === item)) {
          flag = false
        }
      })
      return flag
    },
    prev() {
      if (this.currentIndex > 0) {
        this.currentIndex -= 1
      } else {
        this.$message.warning('已经是第一题')
      }
    },
    next() {
      if (this.currentIndex < (this.list.length - 1)) {
        this.currentIndex += 1
      } else {
        this.$message.warning('已经最后一题')
      }
    },
    //  结束考试
    endTest() {
      this.currentIndex = 0
      this.startTesting = false
    },
    startTest() {
      this.answerList = []
      this.answer = []
      this.currentIndex = 0
      this.startTesting = true
    },
    get_uuid() {
      var s = []
      var hexDigits = '0123456789abcdef'
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
      }
      s[14] = '4'
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1)
      s[8] = s[13] = s[18] = s[23] = '-'

      var uuid = s.join('')
      return uuid
    },
    queryQuestion(id) {
      this.currentIndex = this.list.findIndex(item => item.id === id)
      this.showDialog = true
    }

  }
}
</script>

<style>
  .button-list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items:center;
    width: 400px;
    margin: 40px auto;
  }
  .my-btn {
    margin-top:10px;
    margin-left: 10px;
  }
</style>
